{% extends './layout.html.twig' %}

{% block title %}Desk: {{ desk.name }} | Crypto Bot{% endblock %}

{% block javascript %}
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>

<script type="text/javascript">
{% for pair in desk.pairs %}
new TradingView.widget(
    {
        "autosize": true,
        "symbol": "{{ pair.symbol }}",
        "interval": "{{ interval > 0 ? interval : desk.intervals[0] }}",
        "theme": "Light",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": false,
        "allow_symbol_change": true,
        "container_id": "tradingview_{{ loop.index }}",
        "timezone": Intl.DateTimeFormat().resolvedOptions().timeZone,
        "studies": [
            "RSI@tv-basicstudies"
        ],
    }
);
{% endfor %}
</script>
{% endblock javascript %}

{% block content %}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Chart</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ '/' }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Chart</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.Content Header (Page header) -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title mr-2">{{ desk.name }}</h3>

                                <a title="Fullscreen" href="/desks/{{ id }}/fullscreen?interval={{ interval > 0 ? interval : desk.intervals[0] }}" class="badge bg-cyan"><i class="fas fa-expand"></i></a>

                                {% if desk.intervals|length > 0 %}
                                    {% for interval in desk.intervals|default([]) %}
                                        <a title="Interval {{ interval }}" href="/desks/{{ id }}?interval={{ interval }}" class="badge bg-primary">{{ interval }}</a>
                                    {% endfor %}
                                {% endif %}
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                {% set i = 1 %}
                                {% for row in desk.pairs|batch(desk.grid|default(4), "empty") %}
                                    <div class="row">
                                        {% for pair in row %}
                                            <div class="col-sm">
                                                {% if pair.symbol %}
                                                    <div id="tradingview_{{ i }}" style="width: 100%; height: {{ desk.height|default(300) }}px"></div>
                                                {% endif %}
                                            </div>

                                            {% set i = i + 1 %}
                                        {% endfor %}
                                    </div>
                                {% endfor %}
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
{% endblock content %}
